<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="../lib/three.js"></script>
        <script type="text/javascript" src="../lib/MTLLoader.js"></script>
        <script type="text/javascript" src="../lib/OBJLoader.js"></script>

        <script type="text/javascript">
            var scene = null;
            var camera = null;
            var renderer = null;

            var mesh = null;
            var id = null;

            function init() {
                renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                scene = new THREE.Scene();

                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
                camera.position.set(15, 25, 25);
                camera.lookAt(new THREE.Vector3(0, 2, 0));
                scene.add(camera);

                // material loader
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath('../lib/');
                mtlLoader.load('port.mtl', function(materials) {
                    materials.preload();

                    // model loader
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials(materials);
                    objLoader.setPath('../lib/');
                    objLoader.load('port.obj', function ( object ) {
                        object.position.y = - 95;
                        // if has object, add to scene
                        if (object.children.length > 0) {
                            scene.add( object.children[0] );
                        }
                    });
                });

                var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(20, 10, 5);
                scene.add(light);

                id = setInterval(draw, 20);
            }

            function draw() {
                renderer.render(scene, camera);
            }
        </script>
    </head>

    <body onload="init()" style="width: 100%; height: 350px; margin: 0;">
        <canvas id="mainCanvas" style="width: 400px; height: 350px; margin: 0 auto; display: block;"></canvas>
    </body>
</html>
